<template>
	<view class="handEnter">
		<view class="category-box">
			<view class="flex-d-col">
				<text class="category-txt flex-a-center">发票种类</text>
				<view>
					<uni-data-select v-model="invoice.category" :localdata="range" @change="change" :clear="false"
						placeholder="请选择发票种类"></uni-data-select>
				</view>
			</view>
			<view class="flex-d-col">
				<text class="category-txt flex-a-center">发票代码</text>
				<input class="input" v-model="invoice.code" placeholder-class="placeholder_class"
					placeholder="请输入10位或者12位的发票代码" maxlength="12" />
			</view>
			<view class="flex-d-col">
				<text class="category-txt flex-a-center">发票号码</text>
				<input class="input" maxlength="8" v-model="invoice.number" placeholder-class="placeholder_class"
					placeholder="请输入8位发票号码" />
			</view>
			<view class="flex-d-col pore pick-view">
				<text class="category-txt flex-a-center">开票日期</text>

				<text class="iconfont poab">&#xe63c;</text>
				<view class="picker-input pore">
					<input class="input poab" v-model="invoice.date" placeholder-class="placeholder_class"
						placeholder="请选择开票日期" disabled />
					<picker class="poab pick" mode="date" :value="invoice.date" :start="startDate" :end="endDate"
						@change="bindDateChange">
						<view class="uni-input">{{invoice.date}}</view>
					</picker>

				</view>
			</view>
			<view class="flex-d-col">
				<text class="category-txt flex-a-center">不含税总金额</text>
				<input class="input" v-model="invoice.money" placeholder-class="placeholder_class"
					placeholder="请输入不含税总金额" />
			</view>

		</view>
		<view class="save" :class="{'save-valid':saveValid}" @click="save">
			保存
		</view>
	</view>
	<inputPrompt v-if="isShowPrompt" :isSuccess="isSuccess" :message="message"></inputPrompt>
</template>

<script setup>
	import inputPrompt from '@/components/inputPrompt.vue'
	import {
		ref,
		watch
	} from 'vue'
	const isShowPrompt = ref(false)
	const isSuccess = ref(false)
	const message = ref('票夹中已存在该发票，本次结果将不重复录入票夹')
	const picker = ref();
	const invoice = ref({})
	const startDate = ref('')
	const endDate = ref('')
	let value = ref('')
	let range = ref([{
		value: 0,
		text: "增值税专用发票"
	}])
	const saveValid = ref(false)
	watch(
		() => invoice.value,
		(newVal, oldVal) => {
			if (newVal.category != undefined && newVal.code != undefined && newVal.code != '' && newVal.number !=
				undefined && newVal.number != '' && newVal
				.date != '' && newVal.money != '' && newVal.money != undefined) {
				saveValid.value = true
			} else {
				saveValid.value = false
			}
		}, {
			immediate: true,
			deep: true
		}
	);

	function getDate(type) {
		const date = new Date();
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();

		if (type === 'start') {
			year = year - 60;
		} else if (type === 'end') {
			year = year + 2;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
		return `${year}-${month}-${day}`;
	}

	startDate.value = getDate('start')
	endDate.value = getDate('end')

	function change() {

	}

	function bindDateChange(e) {
		invoice.value.date = e.detail.value
	}

	function save() {
		isShowPrompt.value = true
	}
</script>
<style lang="scss">
	.handEnter {
		padding: 0 24rpx;
		height: 100%;
		box-sizing: border-box;

		.category-box {
			height: calc(100% - 112rpx);

			.category-txt {
				height: 80rpx;
				color: #333333;
				font-size: 28rpx;
				font-weight: 500;
			}

			.category-txt:before {
				content: '*';
				color: #FF516A;
				margin-right: 0px;
			}

			:deep(.uni-select) {
				height: 80rpx !important;
				background: #F6F7F8 !important;
				border-radius: 8rpx !important;
				border: 0 !important;
				font-size: 28rpx !important;
				color: #333333 !important;
			}

			:deep(.uni-select__input-placeholder) {
				color: #A2A2AD !important;
			}

			.input,
			.pick-input,
			.uni-input {
				height: 80rpx;
				background: #F6F7F8;
				border-radius: 8rpx;
				padding: 0 24rpx;
				font-size: 28rpx;
				color: #333333;
			}

			.placeholder_class {
				color: #A2A2AD;
			}

			.pick-view {
				.iconfont {
					color: #666666;
					bottom: 22rpx;
					right: 24rpx;
					font-size: 36rpx;
				}

				.picker-input {
					height: 80rpx;

					input {
						width: 100%;
						font-size: 28rpx;
						color: #333333;
						box-sizing: border-box;
					}

					.pick {
						z-index: 2;
						width: 100%;
					}

					.uni-input {
						color: transparent !important;
						background: transparent !important;
					}
				}
			}
		}

		.save {
			height: 80rpx;
			line-height: 80rpx;
			background: #296DFA;
			border-radius: 40rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
			opacity: .5;
			pointer-events: none;
		}

		.save-valid {
			opacity: 1;
			pointer-events: initial;
		}
	}
</style>